<template>
  <div class="home">
    <mt-header title="首页" fixed>
      <!-- <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link> -->
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <mt-swipe :auto="4000">
      <mt-swipe-item><img src="../assets/images/banner/01.jpg"></mt-swipe-item>
      <mt-swipe-item><img src="../assets/images/banner/02.jpg"></mt-swipe-item>
      <mt-swipe-item><img src="../assets/images/banner/03.jpg"></mt-swipe-item>
    </mt-swipe>
    <div class="title">
      <div class="title_img"><img src="../assets/images/ic_action_send.png" alt="">互联网加校赛专属服务</div>
    </div>
     <div class="col-container">
       <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple everycol">
              <div class="col_title">
                大赛决赛必选服务
              </div>
              <div class="col_content">
                路演特训指导、大赛提分法宝。
              </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple everycol">
              <div class="col_title">
                大赛决赛必选服务
              </div>
              <div class="col_content">
                路演特训指导、大赛提分法宝。
              </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple everycol">
              <div class="col_title">
                大赛决赛必选服务
              </div>
              <div class="col_content">
                路演特训指导、大赛提分法宝。
              </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple everycol">
              <div class="col_title">
                大赛决赛必选服务
              </div>
              <div class="col_content">
                路演特训指导、大赛提分法宝。
              </div>
          </div>
        </el-col>
      </el-row>
     </div>
      <div class="title">
        <div class="title_img"><img src="../assets/images/ic_action_send.png" alt="">专家阵容</div>
      </div>
      <div class="col-container">
       <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple everycol">
                  <div class="col_doctor">
                    <img src="../assets/images/banner/03.jpg" alt="">
                    <div class="every_doctor" >
                      <span>王伟</span>&nbsp;&nbsp;
                      <span>全国高校创新创业投资服务联盟理事长</span>  
                    </div>
                    <div class="every_doctor">
                      <button>评审专家</button>
                      <button>行业专家</button>
                    </div>
                  </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple everycol">
                  <div class="col_doctor">
                    <img src="../assets/images/banner/03.jpg" alt="">
                    <div class="every_doctor" >
                      <span>王伟</span>&nbsp;&nbsp;
                      <span>全国高校创新创业投资服务联盟理事长</span>  
                    </div>
                    <div class="every_doctor">
                      <button>评审专家</button>
                      <button>行业专家</button>
                    </div>
                  </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple everycol">
                  <div class="col_doctor">
                    <img src="../assets/images/banner/03.jpg" alt="">
                    <div class="every_doctor" >
                      <span>王伟</span>&nbsp;&nbsp;
                      <span>全国高校创新创业投资服务联盟理事长</span>  
                    </div>
                    <div class="every_doctor">
                      <button>评审专家</button>
                      <button>行业专家</button>
                    </div>
                  </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple everycol">
                  <div class="col_doctor">
                    <img src="../assets/images/banner/03.jpg" alt="">
                    <div class="every_doctor" >
                      <span>王伟</span>&nbsp;&nbsp;
                      <span>全国高校创新创业投资服务联盟理事长</span>  
                    </div>
                    <div class="every_doctor">
                      <button>评审专家</button>
                      <button>行业专家</button>
                    </div>
                  </div>
              </div>
            </el-col>
      </el-row>
     </div>
  </div>
</template>

<script>
// @ is an alias to /src
import mHeader from '@/components/header'

export default {
  name: 'home',
  components: {
    mHeader
  }
}
</script>
<style scoped>
  .mint-swipe{ height:150px !important;}
  .mint-swipe img { width:100%;height:auto; overflow:hidden}
  .title { width:100%;height:40px; overflow:hidden;}
  .title_img { margin:10px; height:30px; color:#000; text-align:left;}
  .title_img img { height:100%; width:auto; }
  .everycol { margin:3px; }
  .col-container { margin:5px; }
  .col_title ,.col_content{line-height:25px;overflow:hidden;}
  .col_title {font:16px; color: #000;}
  .col_content {font-size:10px; color: #bdbdbd;}
  .col_doctor { width:100%; height:auto; }
  .col_doctor img{ margin-left:10px; width:50px; height:50px; border-radius:50%; position:absolute;left:0;}
  .every_doctor { margin-bottom:10px; margin-top:10px; text-align:left; margin-left:70px; }
    .every_doctor button { border-radius:3px; border:solid 1px #d3dce6; background:#fff; margin-right:10px; }

  .el-row {
    /*margin-bottom: 20px;*/
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    border-radius:3px;
    border:solid 1px #d3dce6; 
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 50px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
